<template>
	<view class="container">
		<!-- 顶部欢迎图标区域 -->
		<view class="header">
			<image src="/static/my/shu.png" class="header-image" mode="aspectFit"></image>
			<view class="welcome-text f f-a-c f-j-c">老师，您好！</view>
		</view>

		<!-- 信息卡片 -->
		<view class="info-card">
			<view class="topBox">

				<view class="top">
					<view class="one f f-a-c">
						<image src="/static/my/bianju.png" class="bainImg" mode=""></image>
						<view class="name">
							教师昵称：
						</view>
						<input type="text" v-model="form.name" :disabled="true"
							style="border: none;width: 300rpx;font-weight: 500;font-size: 36rpx;"
							@confirm="xiuGaiName" />
					</view>
				</view>
				<view class="top">
					<view class="one f f-a-c">
						<image src="/static/my/dianhua.png" class="bainImg" mode=""></image>
						<view class="name">
							联系方式：
						</view>
						<input type="text" v-model="form.phon" :disabled="true"
							style="border: none;width: 300rpx;font-weight: 500;font-size: 36rpx;"
							@confirm="xiuGaiPhon" />
					</view>
				</view>
				<view class="top">
					<view class="one f f-a-c">
						<image src="/static/my/laoshi.png" class="bainImg" mode=""></image>
						<view class="name">
							学校归属：{{schoolName}}
						</view>
					</view>
				</view>
				<view class="top">
					<view class="one f f-a-c f-j-b">
						<view class="f f-a-c">
							<image src="/static/my/shuang.png" class="bainImg" mode=""></image>
							<view class="name">
								班级管理
							</view>

						</view>
						<view @click="addClass" class="f f-a-c">
							<image src="/static/my/jia.png" class="bainImg" mode=""></image>
							<view class="name" style="font-weight: 300;font-size: 32rpx;">
								添加班级
							</view>
						</view>
					</view>
				</view>
				<view class="section">
					<!-- <view class="section-title">班级选择</view> -->
					<view @longpress="onLongPress" class="class-selection">

						<view v-for="(item,index) in myClassList" :key="index" class="class-btn"
							@tap="selectClass(item,index)">
							<image src="/static/home/prop2.png" class="class-icon" mode="aspectFit"></image>
							<text class="class-text">{{item.className}}</text>
							<image v-if="showX" src="/static/home/xred.png" @click="cha(item,index)" class="x" mode="">
							</image>
						</view>

					</view>
				</view>
			</view>
			<view class="topBox m-t-30">
				<view class="topjian f f-a-c f-j-b">
					<view class="f f-a-c">
						<image src="/static/my/wen.png" style="width: 26rpx;height: 32rpx;margin-right: 20rpx;"
							class="img" mode=""></image>
						<view class="" style="font-weight: 400;font-size: 28rpx;color: #333333;">
							用户协议：
						</view>
					</view>
					<image src="/static/home/jian.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
				</view>
				<view class="xian">

				</view>
				<view class="topjian f f-a-c f-j-b">
					<view class="f f-a-c">
						<image src="/static/my/kefu.png" style="width: 30rpx;height: 32rpx;margin-right: 20rpx;"
							class="img" mode=""></image>
						<view class="" style="font-weight: 400;font-size: 28rpx;color: #333333;">
							技术支持：
						</view>
					</view>
					<image src="/static/home/jian.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
				</view>
			</view>
			<view @click="goLogin" class="tuichu f f-a-c f-j-c">
				退出登录
			</view>
		</view>
		<u-select v-if="showSelect" v-model="show" @confirm="confirm" value-name="classId" mode="single-column"
			label-name="className" :list="list" :default-value="[]"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: uni.getStorageSync('teacherName'),
					phon: uni.getStorageSync('phone'),
				},
				show: false,
				setAct: -1,
				showX: false,
				selectedClass: '',
				selectedID: '',
				selectKey: 0,
				showSelect: true,
				list: [{
					className: '你好',
					classId: '1'
				}],
				myClassList: [],
				schoolName: uni.getStorageSync('schoolName') || ''
			};
		},
		onShow() {
			this.init()
		},
		methods: {
			addClass() {
				// 先隐藏组件，完全销毁
				this.showSelect = false;

				// 先清空list，确保组件完全重置
				this.list = [];
				// 重置选中状态
				this.selectedClass = '';
				this.selectedID = '';
				this.show = false;

				// 重新加载班级列表
				this.initClassList();

				// 使用nextTick确保DOM完全更新后再重新显示组件
				this.$nextTick(() => {
					this.showSelect = true;
					this.$nextTick(() => {
						setTimeout(() => {
							this.show = true
						}, 200)
					})
				})
			},
			// 去登陆
			goLogin() {
				uni.removeStorageSync('schoolId')
				uni.removeStorageSync('teacherId')
				uni.removeStorageSync('teacherName')
				uni.removeStorageSync('authCode')
				uni.removeStorageSync('token')
				uni.removeStorageSync('refreshToken')
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 修改手机号点击确认
			xiuGaiPhon() {

			},
			// 修改姓名点击确认
			xiuGaiName() {

			},
			// 点击x删除班级
			async cha(item, index) {
				this.showX = false
				let n = await this.$api.deleteClassTeacher({
					teacherId: uni.getStorageSync('teacherId'),
					classId: item.classId // 使用选中的班级ID
				})
				if (n.code == '0000') {
					this.$msg('删除成功')
					setTimeout(() => {
						this.init()
					}, 1000)
				}
			},
			onLongPress() {
				this.showX = true
				console.log(1111111111111111);
			},
			// 筛选框点击确认
			async confirm(e) {
				console.log('选择的数据:', e);
				console.log('当前list:', this.list);

				if (!e || e.length === 0) {
					this.$msg('请选择班级');
					return;
				}

				this.selectedClass = e[0].className || e[0].label;
				this.selectedID = e[0].classId || e[0].value;

				console.log('解析后的数据:', {
					selectedClass: this.selectedClass,
					selectedID: this.selectedID
				});

				// console.log(this.$safeBigIntToNumber(uni.getStorageSync('teacherId')), '1111');
				let n = await this.$api.addClassTeacher({
					teacherId: uni.getStorageSync('teacherId'),
					classId: this.selectedID
				})
				if (n.code == '0000') {
					this.$msg('添加成功')
					setTimeout(() => {
						// this.initClassList()
						this.init()
					}, 1000)
				} else {
					this.$msg(n.info)
				}
			},
			selectClass(item, index) {
				this.setAct = index
			},
			async initClassList() {
				this.list = []
				// 获取学校的所有班级
				let n = await this.$api.schoolClassList({
					schoolId: uni.getStorageSync('schoolId')
				})
				this.list = n.data.map(item => ({
					className: item.className,
					classId: item.classId // 已经是字符串格式，避免精度丢失
				}));
			},
			async init() {

				// 获取教师的所有班级
				let teacher = await this.$api.classList({
					teacherId: uni.getStorageSync('teacherId')
				})
				console.log(teacher.data, '1111111');
				this.myClassList = teacher.data


			}
		}
	};
</script>

<style scoped lang="scss">
	.container {
		/* padding: 30rpx; */
		background-color: #fff;
		height: 100vh;
	}

	.tuichu {
		width: 100%;
		height: 104rpx;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFFFFF;
		background: #CCCCCC;
		border-radius: 30rpx;
		margin-top: 65rpx;
	}

	.xian {
		width: 100%;
		height: 2rpx;
		background-color: #DADADA;
		margin: 20rpx 0;
	}

	.section {
		// margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #2c3e50;
		margin-bottom: 20rpx;
	}

	.class-selection {
		display: flex;
		// gap: 20rpx;
		flex-wrap: wrap;
	}

	.class-btn {
		position: relative;
		width: 48%;
		margin-right: 2%;
		height: 120rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		display: flex;
		font-size: 28rpx;
		font-weight: 500;
		align-items: center;
		justify-content: center;
		position: relative;
		// overflow: hidden;
		border: 2rpx solid #ccc;
		color: #000;

		&:nth-child(2n) {
			margin-right: 0;
		}

		.x {
			position: absolute;
			width: 30rpx;
			height: 30rpx;
			top: -10rpx;
			right: -10rpx;
		}
	}

	.class-btn-1 {
		background: #64D2FD;
		color: #fff;
	}

	.class-btn-2 {
		background: #E9F9FF;
	}

	.class-icon {
		width: 74rpx;
		height: 68rpx;
		margin-right: 30rpx;
	}

	.class-text {
		font-size: 28rpx;
		color: white;
		font-weight: 500;
		color: #333333;
	}

	.upload-section {
		display: flex;
		gap: 20rpx;
		margin-bottom: 30rpx;
	}

	.topBox {
		width: 100%;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
	}

	.top {

		margin-bottom: 50rpx;

		&:last-child {
			margin-bottom: 0rpx;

		}

		.one {

			.bainImg {
				width: 48rpx;
				height: 48rpx;
				margin-right: 20rpx;
			}

			.name {
				font-family: SourceHanSansCN, SourceHanSansCN;
				font-weight: 500;
				font-size: 36rpx;
				color: #333333;
			}
		}
	}

	.header {
		position: relative;
		height: 250rpx;
		background-color: #03C28E;
	}

	.header-image {
		position: absolute;
		width: 240rpx;
		height: 250rpx;
		right: 0;
		top: 0;
	}

	.welcome-text {
		width: 100%;
		height: 100%;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: 500;
		font-size: 48rpx;
		color: #FFFFFF;
	}

	.info-card {
		position: relative;
		z-index: 9;
		height: calc(100vh - 250rpx);
		background-color: #fff;
		padding: 30rpx;
		margin-top: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
	}

	.info-item {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		color: #333;
	}

	.iconfont {
		margin-right: 10rpx;
		font-size: 30rpx;
	}

	.class-manage .title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.add-btn {
		color: #2196f3;
		font-size: 26rpx;
	}

	.class-list {
		display: flex;
		margin-top: 20rpx;
		gap: 20rpx;
	}

	.class-card {
		flex: 1;
		border-radius: 12rpx;
		padding: 20rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
	}

	.purple {
		background-color: #b39ddb;
	}

	.blue {
		background-color: #4fc3f7;
	}

	.list-menu {
		margin-top: 30rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.menu-item {
		font-size: 28rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.logout-btn {
		margin-top: 40rpx;
		background-color: #ccc;
		text-align: center;
		padding: 20rpx;
		border-radius: 12rpx;
		font-size: 30rpx;
		color: white;
	}
</style>